

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "SearchBar"
  }
}
</route>

<template>
	<view style="background-color: #ffffff;">
		<eui-section title="默认样式，右侧有清除关闭按钮" type="line">
			<eui-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
				@cancel="cancel" @clear="clear">
			</eui-search-bar>
			<view class="search-result">
				<text class="search-result-text">当前输入为：{{ searchValue }}</text>
			</view>
            </eui-section>
			<eui-section title="一直显示右侧清除按钮" type="line">
				<eui-search-bar radius="5" placeholder="一直显示右侧清除按钮" clearButton="always"  @confirm="search"
				@cancel="cancel" />
            </eui-section>

			<eui-section title="自动显示隐藏右侧清除按钮" type="line">
				<eui-search-bar class="uni-mt-10" radius="5" placeholder="自动显示隐藏" clearButton="auto"  @confirm="search" />
            </eui-section>

			<eui-section title="自定义背景色" type="line">
				<eui-search-bar placeholder="自定义背景色" bgColor="rgba(2,183,230,0.05)" @confirm="search" />
            </eui-section>

			<eui-section title="自定义leftIcon" type="line">
				<eui-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel" leftIcon="icon-saoyisao">
				</eui-search-bar>
            </eui-section>

			<eui-section title="圆角+右侧显示更多自定义删选" type="line">
				<eui-search-bar class="uni-mt-10" radius="100" placeholder="圆角+右侧显示更多自定义删选" clearButton="none" @confirm="search" showFilter showFilterTitle="筛选条件">
					<template #searchFields>
            <eui-card-input v-model="searchData.c_id" title="单据号"
                            placeholder="请输入单据号" type="text" />
            <eui-card-input v-model="searchData.effect_dt" title="促销生效日期"
                            placeholder="请选择生效日期" type="date" />
						<eui-button title="dsafsadf" @buttonClick="buttonClick"></eui-button>
					</template>
					</eui-search-bar>
            </eui-section>

			<eui-section title="特殊样式border+右侧搜索按钮" type="line">
				<eui-search-bar placeholder="特殊样式border+右侧搜索按钮" radius="100" @confirm="search" bgColor="#FFFFFF" borderColor="1px solid #02B7E6"  filterButton />
            </eui-section>

			<eui-section title="自定义高度" type="line">
				<eui-search-bar placeholder="自定义高度" radius="100" @confirm="search" bgColor="#FFFFFF" borderColor="1px solid #02B7E6"  filterButton searchHeight="72" />
            </eui-section>

			<eui-section title="自定义提示文字样式" type="line">
				<eui-search-bar placeholder="自定义提示文字样式"  @confirm="search" placeholderStyle="color:#cccccc" />
            </eui-section>



	</view>
</template>

<script>
	export default {
		data() {
			return {
        searchData: {
          c_id: '',
          effect_dt: '',
        },
				searchValue: '123123'
			}
		},
		methods: {
      buttonClick(e) {
        console.log('=======e: ', e);
        console.log('============searchData: ', this.searchData);
      },
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style scoped lang="scss">
@import '../../../../static/font/enjoyicon5.0/iconfont.css';
	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color:#666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
</style>

